﻿<template>
  <el-select v-bind="$myProps" v-on="$myListeners">
    <slot>
      <el-option-group
        v-for="(group, groupIndex) in myOptionGroups"
        :key="groupIndex"
        :label="group.label"
        :disabled="group.disabled"
      >
        <el-option
          v-for="option in createOptions(group)"
          :key="option.value"
          :label="option[group.props.label]"
          :value="option[group.props.value]"
          :disabled="option[group.props.disabled]"
        ></el-option>
      </el-option-group>
    </slot>
  </el-select>
</template>

<script>
export default {
  props: {
    value: {
      type: [String, Number, Boolean, Array],
      default: "",
    },
    //选项属性定义
    props: {
      type: Object,
      default() {
        return {
          label: "label",
          value: "value",
          disabled: "disabled",
        };
      },
    },
    //选项列表组
    optionGroups: {
      type: Array,
    },
    //选项列表
    options: {
      type: [Array, Function, Object],
    },
    objSource: {
      type: [Object],
    },
    //是否可以清空选项
    clearable: {
      type: Boolean,
      default: true,
    },
  },
  computed: {
    $myProps() {
      let myProps = this.$public.inheritProps(this);

      this.$delete(myProps, "props");
      this.$delete(myProps, "optionGroups");
      this.$delete(myProps, "options");
      this.$delete(myProps, "objSource");

      return myProps;
    },
    $myListeners() {
      return this.$public.inheritListeners(this);
    },
    myOptionGroups() {
      let groups = this.optionGroups || [{}];

      groups.forEach((group) => {
        group.options = group.options || this.options;
        group.objSource = group.objSource || this.objSource;
        group.props = group.props || this.props;
      });

      return groups;
    },
  },
  methods: {
    createOptions({ options, objSource, props }) {
      var objSource = objSource || options;

      let resource = this.$core.convertOptions({
        options,
        props,
        objSource,
      });

      return resource;
    },
  },
  mounted() {
    this.$emit("mounted");
  },
  created() {
    this.$emit("created");
  },
};
</script>
<style>
/* 防止变短 */

.el-select {
  width: 100%;
}
/* 滚动条显示  以及最大高度 */
.el-scrollbar__wrap {
  overflow: auto !important;
}
.el-select-dropdown__wrap {
  max-height: 240px !important;
}
/* 下拉框地板间距样式 */
.el-popper[x-placement^="bottom"] {
  padding-bottom: 5px;
}
</style>
